使用 react 作法

npm i @emotion/react

import { css, jsx } from '@emotion/react'

const color = 'white'

render(
  <div
    css={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
   Demo
  </div>
)

使用這種方式的 css, 最終 css``` 不會產生一個新的 className, 會直接對 element 做 style 的附加，如果 css ``` 經由父傳子,且有相同的 css 屬性,則後者會蓋掉前者。

import { jsx } from '@emotion/react'

const Child = props => (
  <p
    css={css`
      margin: 0,
      fontSize: 12,
      lineHeight: 1.5,
      fontFamily: 'Sans-Serif',
      color: black`
    }
  />
)

const Parent = props => (
  <Child
    css={
     css`
		  fontSize: 14,
		  fontFamily: 'Georgia, serif',
		  color: darkgray
		 `
   }
  />
)

import { jsx } from '@emotion/react'

const Child = props => (
  <p
    css={css`
      margin: 0;
      fontSize: 12;
      lineHeight: 1.5;
      fontFamily: 'Sans-Serif';
      color: black;`
    }
  />
)

const Parent = props => (
  <Child
    css={
     css`
		 fontSize: 14;
		 fontFamily: 'Georgia, serif';
		 color: darkgray;
	   `
   }
  />
)

// 最後 Child 剩下的 style 

{
  *fontSize: 14;* //被刪除
  *fontFamily: 'Georgia, serif';* //被刪除
  *color: darkgray;* //被刪除
  margin: 0;
  fontSize: 12;
  lineHeight: 1.5;
  fontFamily: 'Sans-Serif';
  color: black;
}